<template>
  <view class="content">
    <view class="filtter-view">
      <view class="wrap">
        <nav-bar
          @iconTap="iconTap"
          @navSearch="navSearch"
          :title="'派车单'"
          :pbFlag="false"
          :blurSearch="false"
          :leftIconList="['left']"
          :rightIconList="['plus']"
          :inputObj="{
            width: '240rpx',
            placeholder: '关键字搜索',
            center: true,
            value: filterValue,
          }"
        />
        <view class="filtter" @click="showFilter">
          <view class="uni-input">{{
            type === "" ? "全部" : status[type].str
          }}</view>
          <text class="iconfont icon-xia"></text>
        </view>
      </view>
    </view>
    <scroll-list
      ref="scrollList"
      :height="`calc(100vh - 120rpx - ${$util.getStatusBarHeight()})`"
      :scrollFlag="false"
      @getData="getData"
    >
      <template v-slot="{ item, index }">
        <view class="item" :key="index">
          <view class="top">
            <text> {{ item.cph }}</text>
            <text> {{ item.ycr_desc }}</text>
            <text :style="{ color: status[item.status].color }">
              {{ status[item.status].str
              }}{{
                item.status == 4
                  ? `(${item.totalSpr - item.unfinished}/${item.totalSpr})`
                  : ""
              }}</text
            >
          </view>
          <view class="time-status">
            <text
              ><text class="label">开始时间：</text>{{ item.kssj }}</text
            ></view
          >
          <view> <text class="label">结束时间：</text>{{ item.jssj }} </view>
          <view class="btns">
            <view class="code">{{ item.bh }}</view>
            <view>
              <tui-button
                plain
                shape="circle"
                width="180rpx"
                height="60rpx"
                @click="$util.goUrl('/pages/carOrderAdd?id=' + item.id)"
              >
                详情
              </tui-button>
              <tui-button
                v-if="
                  (item.status == '0' && item.ycr == loginAccount) ||
                  (item.status == '4' &&
                    item.xfsprArr &&
                    item.xfsprArr.indexOf(loginAccount) > -1) ||
                  (item.status == '12' && item.ycr == loginAccount)
                "
                shape="circle"
                width="180rpx"
                height="60rpx"
                style="margin-left: 30rpx"
                @click="
                  $util.goUrl('/pages/carOrderAdd?spFlag=1&id=' + item.id)
                "
                >立即处理
              </tui-button>
            </view>
          </view>
        </view>
      </template>
    </scroll-list>
  </view>
</template>

<script>
import navBar from "@/components/nav-bar/nav-bar.vue";
import scrollList from "@/components/scroll-list/scroll-list.vue";

export default {
  components: { navBar, scrollList },
  data() {
    return {
      pzhAuthorization: uni.getStorageSync("pzhAuthorization"),
      loginAccount: uni.getStorageSync("loginAccount"),
      filterValue: "",
      type: "",
      status: {
        0: { str: "待更正", color: "#DAA520" },
        4: { str: "各部门确认", color: "#DAA520" },
        12: { str: "待返", color: "#DAA520" },
        16: { str: "已结束", color: "#3eda52" },
        24: { str: "", color: "red" },
      },
      refresh: false,
    };
  },
  onLoad() {
    this.$nextTick(() => {
      this.$refs.scrollList.getData(1);
    });
  },
  onPullDownRefresh() {
    console.log("-------");
    this.$refs.scrollList.getData(2);
  },
  onReachBottom() {
    this.$refs.scrollList.getData(3);
  },
  methods: {
    refreshByBack() {
      uni.startPullDownRefresh();
      uni.pageScrollTo({
        scrollTop: 0,
      });
    },
    showFilter() {
      uni.showActionSheet({
        itemList: ["全部", "待更正", "各部门确认", "待返", "已结束", "已废弃"],
        success: (res) => {
          let list = ["", 0, 4, 12, 16, 24];
          this.type = list[res.tapIndex];
          this.$nextTick(() => {
            this.$refs.scrollList.getData(1);
          });
        },
      });
    },
    iconTap(index) {
      if (index) {
        this.$util.goUrl("/pages/carOrderAdd");
      } else {
        this.$util.goUrl(0);
      }
    },
    navSearch(value) {
      this.filterValue = value;
      this.$nextTick(() => {
        this.$refs.scrollList.getData(1);
      });
      //接收菜单结果
    },
    getData(param) {
      this.$api
        .selectClglPcgl({
          page: param.pageNo,
          pagesize: 4,
          keywords: this.filterValue,
          pzhAuthorization: this.pzhAuthorization,
          statusArr: this.type,
        })
        .then((res) => {
          if (res.resCode == "success") {
            console.log("---------");
            res.datas.map((item) => {
              item.kssj = item.kssj ? item.kssj.substring(0, 16) : "--";
              item.jssj = item.jssj ? item.jssj.substring(0, 16) : "--";
            });
            this.$refs.scrollList.setData(
              res.datas,
              param.pageNo * 4 >= res.total
            );
          } else {
            this.$refs.scrollList.setData(false, false);
          }
        });
      // setTimeout(() => {
      //   let list = [];
      //   for (let i = 0; i < 20; i++) {
      //     list.push(i);
      //   }
      //   uni.stopPullDownRefresh();
      //   this.$refs.scrollList.setData(param.pageNo == 1 ? false : list, false);
      // }, 2000);
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  min-height: 100vh;
  background: $back-grey-color;
  .filtter-view {
    position: sticky;
    top: 0;
    z-index: 10000;
    .wrap {
      position: relative;
      .filtter {
        color: #fff;
        position: absolute;
        bottom: 20rpx;
        right: 80rpx;
        border-radius: 16rpx;
        font-size: 24rpx;
        display: flex;
        align-items: center;
        z-index: 100000;
      }
    }
  }

  .item {
    background: #ffffff;
    width: 710rpx;
    margin: 28rpx 0 0 20rpx;
    line-height: 70rpx;
    padding: 0 10rpx;
    box-sizing: border-box;
    border-radius: $default-border-radius;
    border: 1rpx solid $theme-color;
    .top {
      display: flex;
      align-items: center;
      text:first-child {
        font-weight: bold;
        margin-right: 40rpx;
      }
      text:last-child {
        text-align: right;
        flex-grow: 1;
      }
    }
    .time-status {
      display: flex;
      justify-content: space-between;
    }
    .label {
      color: $font-grey-color;
    }
    .iconfont {
      color: $theme-color;
    }
    .btns {
      padding: 20rpx 20rpx 20rpx 0;
      margin-top: 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1rpx solid $default-border-color;
      .code {
        width: 240rpx;
        color: $default-color;
      }
      view {
        display: flex;
      }
    }
  }
}
</style>
